<template>
  <t-modal
    centered
    :title="name + '选择'"
    :width="width"
    :visible="visible"
    switchFullscreen
    @ok="handleOk"
    @cancel="close"
    cancelText="关闭"
  >
    <a-row :gutter="18">
      <a-col :span="16">
        <!-- 查询区域 -->
        <a-form layout="inline" class="j-inline-form">
          <!-- 固定条件 -->
          <a-form-item :label="queryParamText || name">
            <a-input
              v-model="queryParam[queryParamCode || valueKey]"
              :placeholder="'请输入' + (queryParamText || name)"
              @pressEnter="searchQuery"
            />
          </a-form-item>
          <!-- 动态生成的查询条件 -->
          <TSelectUserQueryItem
            v-if="queryConfig.length > 0"
            v-show="showMoreQueryItems"
            :queryParam="queryParam"
            :queryConfig="queryConfig"
            @pressEnter="searchQuery"
          />
          <!-- 按钮 -->
          <a-button
            type="primary"
            @click="$refs.table.refresh(true)"
            icon="search"
            >查询</a-button
          >
          <a-button
            type="primary"
            @click="
              () => {
                (queryParam = {}), $refs.table.refresh(true);
              }
            "
            icon="reload"
            >重置</a-button
          >
          <!-- <a v-if="queryConfig.length>0" @click="showMoreQueryItems=!showMoreQueryItems" >
            {{ showMoreQueryItems ? '收起' : '展开' }}
            <a-icon :type="showMoreQueryItems ? 'up' : 'down'"/>
          </a> -->
        </a-form>
        <s-table
          ref="table"
          size="middle"
          rowKey="userNameId"
          :columns="columns"
          :data="loadData"
          :loading="loading"
          :rowSelection="{
            selectedRowKeys,
            onChange: onSelectChange,
            onSelectAll: onSelectAll,
            type: multiple ? 'checkbox' : 'radio',
          }"
        >
          <span slot="sex" slot-scope="text">
            {{ text | sexFilter }}
          </span>
        </s-table>
      </a-col>
      <a-col :span="8">
        <a-card
          :title="'已选' + name"
          :bordered="false"
          :head-style="{ padding: 0 }"
          :body-style="{ padding: 0 }"
        >
          <a-table
            size="middle"
            rowKey="userNameId"
            v-bind="selectedTable"
          >
            <span slot="action" slot-scope="text, record, index">
              <a @click="handleDeleteSelected(record, index)">删除</a>
            </span>
          </a-table>
        </a-card>
      </a-col>
    </a-row>
  </t-modal>
</template>

<script>
import { STable, Ellipsis } from "@/components";

import { cloneObject, pushIfNotExist } from "@/utils/util";
import TSelectUserQueryItem from "./TSelectUserQueryItem";
export default {
  name: "TSelectBizComponentModal",
  components: { Ellipsis, TSelectUserQueryItem, STable },
  props: {
    value: {
      type: Array,
      default: () => [],
    },
    visible: {
      type: Boolean,
      default: false,
    },
    valueKey: {
      type: String,
      required: true,
    },
    multiple: {
      type: Boolean,
      default: true,
    },
    width: {
      type: Number,
      default: 900,
    },

    name: {
      type: String,
      default: "",
    },
    listUrl: {
      type: String,
      required: true,
      default: "",
    },
    // 根据 value 获取显示文本的地址，例如存的是 username，可以通过该地址获取到 realname
    valueUrl: {
      type: String,
      default: "",
    },
    displayKey: {
      type: String,
      default: null,
    },
    columns: {
      type: Array,
      required: true,
      default: () => [],
    },
    // 查询条件Code
    queryParamCode: {
      type: String,
      default: null,
    },
    queryParam: {
      type: Object,
      default: null,
    },
    // 查询条件文字
    queryParamText: {
      type: String,
      default: null,
    },
    // 查询配置
    queryConfig: {
      type: Array,
      default: () => [],
    },
    // 过长裁剪长度，设置为 -1 代表不裁剪
    ellipsisLength: {
      type: Number,
      default: 12,
    },
  },
  data() {
    return {
      innerValue: [],
      // 已选择列表
      selectedTable: {
        pagination: false,
        scroll: { y: 240 },
        columns: [
          {
            ...this.columns[1],
          },
          {
            title: "操作",
            dataIndex: "action",
            align: "center",
            width: 60,
            scopedSlots: { customRender: "action" },
          },
        ],
        dataSource: [],
      },
      loadData: (parameter) => {
        const requestParameters = Object.assign({}, parameter, this.queryParam);
        return this.$post(this.listUrl, requestParameters).then((res) => {
          this.dataSource = res.rows;
          return res;
        });
      },
      url: { list: this.listUrl },
      options: [],
      dataSourceMap: {},
      showMoreQueryItems: false,
      loading: false,
      selectionRows: [],
      selectedRowKeys: [],
    };
  },
  filters: {
    sexFilter(sex) {
      const sexMap = {
        1: "男",
        2: "女",
      };
      return sexMap[sex];
    },
  },
  watch: {
    value: {
      deep: true,
      immediate: true,
      handler(val) {
        this.innerValue = cloneObject(val);
        this.selectedRowKeys = [];
        this.valueWatchHandler(val);
        this.queryOptionsByValue(val);
      },
    },
    dataSource: {
      deep: true,
      handler(val) {
        this.emitOptions(val);
        this.valueWatchHandler(this.innerValue);
      },
    },
    //    selectedRowKeys: {
    //      deep: true,
    //      immediate: true,
    //      handler(val) {
    // console.log(this.valueKey,this.dataSource)
    //        //update--begin--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
    //        if(this.innerValue){
    //          this.innerValue.length=0;
    //        }
    //        //update--end--autor:scott-----date:20200927------for：选取职务名称出现全选 #1753-----
    //        this.selectedTable.dataSource = val.map(key => {
    //          for (let data of this.dataSource) {
    //            if (data.userNameId === key) {
    //              pushIfNotExist(this.innerValue, data[this.valueKey])
    //              return data
    //            }
    //          }
    //          for (let data of this.selectedTable.dataSource) {
    //            if (data.userNameId === key) {
    //              pushIfNotExist(this.innerValue, data[this.valueKey])
    //              return data
    //            }
    //          }
    //          console.warn('未找到选择的行信息，key：' + key)
    // console.log(val,'val')
    //          return val
    //        })
    //      },
    //    }
  },
  methods: {
    /** 关闭弹窗 */
    close() {
      this.$emit("update:visible", false);
    },
    searchQuery() {},
    searchReset() {},
    handleTableChange() {},
    onSelectChange(selectedRowKeys, selectedRow) {
      let dataSource = this.selectedTable.dataSource.concat(selectedRow);
      this.selectedTable.dataSource = dataSource.reduce(
        (all, next) =>
          all.some((item) => item["uuid"] === next["uuid"])
            ? all
            : [...all, next],
        []
      );
      this.selectedRowKeys = selectedRowKeys.reduce(
        (all, next) =>
          all.some((item) => item == next) ? all : [...all, next],
        []
      );
    },
    onSelectAll(selected, selectedRows, changeRows) {
      if (!selected) {
        const selectionsRows = [];
        const dataSource = [];
        this.selectedRowKeys.forEach((e, index) => {
          if (JSON.stringify(changeRows).indexOf(JSON.stringify(e)) === -1) {
            selectionsRows.push(e);
          }
        });
        this.selectedTable.dataSource.forEach((e, index) => {
          if (
            JSON.stringify(changeRows).indexOf(JSON.stringify(e.uuid)) === -1
          ) {
            dataSource.push(e);
          }
        });
        this.selectedRowKeys = selectionsRows;
        this.selectedTable.dataSource = dataSource;
      }
    },
    valueWatchHandler(val) {
      val.forEach((item) => {
        this.dataSource
          .concat(this.selectedTable.dataSource)
          .forEach((data) => {
            if (data[this.valueKey] === item) {
              pushIfNotExist(this.selectedRowKeys, data[this.rowKey]);
            }
          });
      });
    },

    queryOptionsByValue(value) {
      if (!value || value.length === 0) {
        return;
      }
      // 判断options是否存在value，如果已存在数据就不再请求后台了
      let notExist = false;
      for (let val of value) {
        let find = false;
        for (let option of this.options) {
          if (val === option.value) {
            find = true;
            break;
          }
        }
        if (!find) {
          notExist = true;
          break;
        }
      }
      if (!notExist) return;
      this.$post(this.valueUrl || this.listUrl, {
        // 这里最后加一个 , 的原因是因为无论如何都要使用 in 查询，防止后台进行了模糊匹配，导致查询结果不准确
        [this.valueKey]: value.join(",") + ",",
        pageNo: 1,
        pageSize: value.length,
      }).then((res) => {
        if (res.success) {
          let dataSource = res.result;
          if (!(dataSource instanceof Array)) {
            dataSource = res.result.records;
          }
          this.emitOptions(dataSource, (data) => {
            pushIfNotExist(this.innerValue, data[this.valueKey]);
            pushIfNotExist(this.selectedRowKeys, data[this.rowKey]);
            pushIfNotExist(this.selectedTable.dataSource, data, this.rowKey);
          });
        }
      });
    },

    emitOptions(dataSource, callback) {
      dataSource.forEach((data) => {
        let key = data[this.valueKey];
        this.dataSourceMap[key] = data;
        pushIfNotExist(
          this.options,
          { label: data[this.displayKey || this.valueKey], value: key },
          "value"
        );
        typeof callback === "function" ? callback(data) : "";
      });
      this.$emit("options", this.options, this.dataSourceMap);
    },

    /** 完成选择 */
    handleOk() {
      let value = this.selectedTable.dataSource.map(
        (data) => data[this.valueKey]
      );
      this.$emit("input", value);
      this.close();
    },
    /** 删除已选择的 */
    handleDeleteSelected(record, index) {
      this.selectedRowKeys.splice(
        this.selectedRowKeys.indexOf(record[this.rowKey]),
        1
      );
      //update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
      this.selectedTable.dataSource.splice(
        this.selectedTable.dataSource.indexOf(record),
        1
      );
      this.innerValue.splice(this.innerValue.indexOf(record[this.valueKey]), 1);
      //update--begin--autor:wangshuai-----date:20200722------for：JSelectBizComponent组件切换页数值问题------
    },

    customRowFn(record) {
      return {
        on: {
          click: () => {
            let key = record[this.rowKey];
            if (!this.multiple) {
              this.selectedRowKeys = [key];
              this.selectedTable.dataSource = [record];
            } else {
              let index = this.selectedRowKeys.indexOf(key);
              if (index === -1) {
                this.selectedRowKeys.push(key);
                this.selectedTable.dataSource.push(record);
              } else {
                this.handleDeleteSelected(record, index);
              }
            }
          },
        },
      };
    },
  },
};
</script>
<style lang="less" scoped>
.full-form-item {
  display: flex;
  margin-right: 0;

  /deep/ .ant-form-item-control-wrapper {
    flex: 1 1;
    display: inline-block;
  }
}

.j-inline-form {
  /deep/ .ant-form-item {
    margin-bottom: 12px;
  }

  /deep/ .ant-form-item-label {
    line-height: 32px;
    width: auto;
  }

  /deep/ .ant-form-item-control {
    height: 32px;
    line-height: 32px;
  }
}
</style>
